<template>
	<view>
		<view class="item d-s-s line pb30 pt30" :class="type==2 || type==4 || type==5 || type==6 || type==7 ? 'd-c':''">
			<view class="left">
				<view class="title mr20" :class="type==2||type==4||type==5||type==6||type==7 ? 'mb20' : ''">
					{{title}}
					<text v-if="required" class='red ml5'>*</text>
				</view>
				<view v-if="subtitle" class="subtitle f22 sub">{{subtitle}}</view>
			</view>
			<view class="right flex-1">
				<block v-if="type==1">
					<u--input :disabled='disabled' :placeholder="'请输入'+title" border="none" :value="value"
						@input="onInput"></u--input>
				</block>
				<block v-if="type==2">
					<u--textarea :disabled='disabled' height='150' :value="value" @input="onInput"
						:placeholder="'请输入'+title" count></u--textarea>
				</block>
				<block v-if="type==3">
					<picker :disabled='disabled' mode="selector" :range="list" @change="setPicker" :value="index">
						<view class="d-b-c">
							<view class="sub" v-if="!value">请选择{{title}}</view>
							<view class="name" v-else>{{value}}</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</picker>
				</block>
				<block v-if="type==4">
					<view class="radio ww100 d-s-c f-w">
						<view class="item pt10 pb10 pl20 pr20 br04 mr20 f26 mb20" @click="onInput(item)"
							:class="item==value?'active':''" v-for="(item,index) in list" :key="index">{{item}}
						</view>
					</view>
				</block>
				<block v-if="type==5">
					<view class="checkbox ww100 d-s-c f-w">
						<view class="item pt10 pb10 pl20 pr20 br04 mr20 f26 mb20"
							:class="value.indexOf(item)!=-1?'active':''" @click="setVal(item)"
							v-for="(item,index) in list" :key="index">{{item}}</view>
					</view>
				</block>
				<block v-if="type==6">
					<u-upload :disabled='disabled' :fileList="fileList" @afterRead="afterRead" @delete="deletePic"
						:maxCount="1" :deletable='!disabled'></u-upload>
				</block>
				<block v-if="type==7">
					<u-upload :disabled='disabled' :fileList="fileList" @afterRead="afterRead" @delete="deletePic"
						:maxCount="9" :deletable='!disabled'></u-upload>
				</block>
				<block v-if="type==8">
					<u--input :disabled='disabled' :maxlength='11' type='number' :placeholder="'请输入'+title"
						border="none" :value="value" @input="onInput"></u--input>
				</block>
				<block v-if="type==10">
					<u-upload :disabled='disabled' :fileList="fileList" accept='file' @afterRead="afterRead"
						@delete="deletePic" :maxCount="10"></u-upload>
				</block>
				<block v-if="type==11">
					<picker :disabled='disabled' mode="region" @change="setCity" :value="index">
						<view class="d-b-c">
							<view class="sub" v-if="!value">请选择地区</view>
							<view class="name" v-else>{{value}}</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</picker>
				</block>
				<block v-if="type==12">
					<picker :disabled='disabled' mode="date" @change="setDate" :value="value">
						<view class="d-b-c">
							<view class="sub" v-if="!value">请选择日期</view>
							<view class="name" v-else>{{value}}</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</picker>
				</block>
				<block v-if="type==13">
					<picker :disabled='disabled' mode="time" @change="setDate" :value="value">
						<view class="d-b-c">
							<view class="sub" v-if="!value">请选择时间</view>
							<view class="name" v-else>{{value}}</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</picker>
				</block>
				<view v-if="type==14" class="d-b-c">
					<view class=""></view>
					<u-number-box v-model="value" @change="valChange"></u-number-box>
				</view>
				<block v-if="type==15">
					<picker :disabled='disabled' mode="time" @change="setDate" :value="value">
						<view class="d-b-c">
							<view class="sub" v-if="!value">请选择时间</view>
							<view class="name" v-else>{{value}}</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</picker>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * @property {Number}         vlaue				双向绑定内容
	 * @property {Number}         type				类型1单行文本，2多行文本，3下拉框，4多选框，5多选，6单张图，7多张图，8手机号，9邮箱，10附件，11区域联动，12日期选择，13时间选择	
	 * @property {Number}         title				左侧标题
	 * @property {Number}         list				单选多选下拉框
	 * @property {Boolean}		  disabled			只读 
	 * @property {Number}         required			是否必选
	 * @event {Function} 		  click 			点击事件1 
	 */
	export default {
		// model: {
		// 	prop: 'value',
		// 	event: 'input' // event 后的值必须是input,其他值无效。
		// },
		props: {
			required: {
				type: Number,
				default: 1
			},
			disabled: {
				type: Boolean,
				default: false
			},
			value: {
				type: [String, Array]
			},
			type: {
				type: Number,
				default: 0
			},
			title: {
				type: String,
				default: ""
			},
			subtitle: {
				type: String,
				default: ""
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		name: "from-item",
		data() {
			return {
				index: 0,
				fileList: []
			};
		},
		methods: {
			setDate(e) {
				this.$emit('input', e.detail.value)
			},
			setCity(e) {
				console.log(e);
				this.index = e.detail.value
				this.$emit('input', e.detail.value.join(','))
			},
			upload(filePath) {
				return new Promise((resolve) => {
					uni.$u.http.upload('common/upload', {
						filePath,
						name: 'file',
					}).then(res => {
						resolve(res.data.url)
					})
				})
			},
			async afterRead(e) {
				this.fileList.push(e.file)
				let list = this.value ? this.value.split(',') : []
				list.push(await this.upload(e.file.url))
				list = list.join(',')
				this.$emit('input', list);
			},
			deletePic(e) {
				this.fileList.splice(e.index, 1)
				let list = this.value ? this.value.split(',') : []
				let i = list.findIndex(item => item == e.file.url)
				list.splice(i, 1)
				list = list.join(',')
				this.$emit('input', list);
			},
			setVal(e) {
				if (this.disabled) return
				let list = this.value ? this.value.split(',') : []
				let i = list.findIndex(item => item == e)
				if (i == -1) {
					list.push(e)
				} else {
					list.splice(i, 1)
				}
				list = list.join(',')
				this.$emit('input', list);
				console.log(list);
			},
			setPicker(e) {
				this.index = e.detail.value
				this.$emit('input', this.list[e.detail.value])
			},
			onInput(e) {
				if (this.disabled) return
				this.$emit('input', e);
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			}
		},
		created() {
			if (this.type == 6 || this.type == 7) {
				this.fileList = this.value
			}
		}
	}
</script>

<style scoped lang="scss">
	.sub {
		color: #c0c4cc;
	}

	.radio,
	.checkbox {
		.item {
			background: #eee;
		}

		.active {
			background-color: #e7f4fd;
			color: #5276d8;
		}
	}

	.title {
		width: 6em;
	}

	.right {
		width: 100%;
	}

	.textarea {
		width: 100%;
		height: 200rpx;
	}
</style>